<template>
  <div id="app">
    <header>
      <nav>
        <ul>
          <li>
            <router-link to="/">
              <template v-slot="props">
                <button @click="props.navigate" :class="{ active: props.isActive }">Home</button>
              </template>
            </router-link>
          </li>
          <li>
            <router-link to="/about">
              <template v-slot="props">
                <button @click="props.navigate" :class="{ active: props.isActive }">About</button>
              </template>
            </router-link>
          </li>
          <li>
            <router-link :to="{ name: 'User', params: { userId: 1 } }">
              <template v-slot="props">
                <button @click="props.navigate" :class="{ active: props.isActive }">User 1</button>
              </template>
            </router-link>
          </li>
          <li>
            <router-link :to="{ path: '/main/contact' }">
              <template v-slot="props">
                <button @click="props.navigate" :class="{ active: props.isActive }">Contact</button>
                <div>Href: {{ props.href }}</div>
                <div>IsActive: {{ props.isActive }}</div>
                <div>IsExactActive: {{ props.isExactActive }}</div>
              </template>
            </router-link>
          </li>
        </ul>
      </nav>
    </header>

    <main>
      <router-view v-slot="props">
        <transition name="zzu">
          <keep-alive>
            <component :is="props.Component" v-bind="props.routeProps"></component>
          </keep-alive>
        </transition>
      </router-view>
    </main>
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>

<style scoped>
.active {
  background-color: #42b983;
  color: #00ff9d;
}

.zzu-active {
  color: red;
}

.zzu-enter-from,
.zzu-leave-to {
  opacity: 0;
}

.zzu-enter-active,
.zzu-leave-active {
  transition: opacity 2s ease;
}
</style>
